<template>
<div id="map" class="mapC"></div>
</template>

<script>
import 'ol/ol.css'
import Feature from 'ol/Feature'
import Map from 'ol/Map'
import Point from 'ol/geom/Point'
import XYZ from 'ol/source/XYZ'
import VectorSource from 'ol/source/Vector'
import View from 'ol/View'
import {Icon, Style} from 'ol/style'
import {Modify} from 'ol/interaction'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
import {fromLonLat} from 'ol/proj'
export default {
  name: 'index',
  data () {
    return {}
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const iconFeature = new Feature({
        geometry: new Point([0, 0]),
        name: 'Null Island',
        population: 3000,
        rainfall: 400
      })

      const iconStyle = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'zlocal/data/icon.png'
        })
      })
      const iconFeature1 = new Feature({
        geometry: new Point(fromLonLat([12.5, 41.9])),
        name: 'Null Island',
        population: 4000,
        rainfall: 500
      })

      const iconStyle1 = new Style({
        image: new Icon({
          anchor: [0.5, 46],
          anchorXUnits: 'fraction',
          anchorYUnits: 'pixels',
          src: 'zlocal/data/icon.png'
        })
      })
      iconFeature.setStyle(iconStyle)
      iconFeature1.setStyle(iconStyle1)

      const vectorSource = new VectorSource({
        features: [iconFeature, iconFeature1]
      })

      const vectorLayer = new VectorLayer({
        source: vectorSource
      })

      const rasterLayer = new TileLayer({
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png',
          crossOrigin: ''
        })
      })

      const target = document.getElementById('map')
      const map = new Map({
        layers: [rasterLayer, vectorLayer],
        target: target,
        view: new View({
          center: [0, 0],
          zoom: 3
        })
      })

      const modify = new Modify({
        hitDetection: vectorLayer,
        source: vectorSource
      })

      // 鼠标选中icon时修改样式 ==========================  start
      modify.on(['modifystart', 'modifyend'], function (evt) {
        target.style.cursor = evt.type === 'modifystart' ? 'grabbing' : 'pointer'
      })

      const overlaySource = modify.getOverlay().getSource()
      console.log(overlaySource, 'overlaySource')
      overlaySource.on(['addfeature', 'removefeature'], function (evt) {
        target.style.cursor = evt.type === 'addfeature' ? 'pointer' : ''
      })
      // 鼠标选中icon时修改样式 ==========================  end
      map.addInteraction(modify)
    }
  }
}
</script>

<style scoped>

</style>
